<template>
<div>
        <ProTable
      class="protable"
      :data="tableData"
      :page="page"
      :column="column"
      :rowControl="rowControl"
      :elProps="elProps"
      :controlWidth="controlWidth"
      @row-control-click="onRowControlClick"
      @page-change="onPageChange"
      @pageRefresh="pageRefresh"
    >

    </ProTable>
</div>
</template>

<script setup>
import { reactive, ref } from 'vue' 

const pageRefresh = ()=>{
    console.log('pageRefresh');
    tableList()
}
const tableList = ()=>{ 
    console.log('tableList');
}
const emit = defineEmits(['search-dialog'])
const onRowControlClick = ({ scope: { row }, type }) => {
     emit('search-dialog',row ,type)
};
const onPageChange = ({ e, type }) => {
  console.log(e, type);
  if (type == "current") {
    page.current_page = e;
  }
  if (type == "size") {
    page.per_page = e;
  }
};
const controlWidth = {

  }
// 表格行内操作按钮
const rowControl = ['rowselect'];
// 分页数据（不给就没有分页）
const page = reactive({
  current_page: 1, //当前页
  per_page: 10, //每页条数
  total: 100, //总条数
  page_size: [10, 20, 30], //可选分页条数
});
// 字段名对应表头
const column = {
  name: "職位名稱",
  TeachingStatus: "授課狀態",
  SalesStatus: "銷售狀態",
  statuss: "狀態",
};

const elProps={
    border:true,//边框
    stripe:false,//斑马纹
    // rowClassName:tableRowClassName,//带状态表格
    operate:true,//是否显示操作菜单
    operateType:'button',
    freeOperate:false,//是否显示  独立 表格操作菜单
    selection:false,//是否显示多选
    showOverflowTooltip:true,//单行显示

    indexType:true,//是否显示序列号
    buttonControl:true,//顶部操作按钮
    iconControl:true,//顶部操作按钮  图表模式
    class:'proTable',
    style:{
      // marginTop:'25px',
    },
    cellStyle:{
        textAlign:'center',
    },
      headerCellStyle:{
        textAlign:'center',
        // color:'red'
      },
}
 const tableData =reactive([{
    name: 'Tom',
    TeachingStatus:'可授課',
    SalesStatus:'可銷售',
    statuss:'正常',
  },
  {
    name: 'Tom',
    TeachingStatus:'不可授課',
    SalesStatus:'不可銷售',
    statuss:'禁用',
  },
  {
    name: 'Tom',
    TeachingStatus:'不可授課',
    SalesStatus:'不可銷售',
    statuss:'禁用',
  },
  ])

</script>

<style lang='less'  scoped>

</style>